<style type="text/css">
	.collection_list_default .collection_content ul {
	    display: grid;
	    row-gap: 30px;
	    column-gap: 30px;
	    grid-template-columns: repeat(3, 1fr);
	}

	.collection_list_default .collection_content li {
	    list-style-type: none;
	    overflow: hidden;
	}

	.collection_list_default .collection_content li .collection_pic {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    position: relative;
	    overflow: hidden;
	}
	.collection_list_default .collection_content li .collection_img{
	    width: 100%;
	    height: 100%;
	}

	.collection_list_default .collection_content li .collection_pic img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    -webkit-transition: all .8s ease;
	    -moz-transition: all .8s ease;
	    -ms-transition: all .8s ease;
	    -o-transition: all .8s ease;
	    transition: all .8s ease;
	}
	.collection_list_default .collection_content li:hover .collection_pic img{
	    transform: scale(1.1);
	}

	.collection_list_default .collection_content li .collection_pic .collection_name {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    background: rgba(0, 0, 0, .25);
	    color: #fff;
	    font-size: 24px;
	    font-family: var(--title_font_family);
	    font-style: var(--title_font_style);
	    font-weight: var(--title_font_weigth);
	    -webkit-transition: all .8s ease;
	    -moz-transition: all .8s ease;
	    -ms-transition: all .8s ease;
	    -o-transition: all .8s ease;
	    transition: all .8s ease;
	}
	.collection_list_default .collection_content li:hover .collection_pic .collection_name{
		background: rgba(0, 0, 0, .5);
	}
	.collection_list_default .collection_content li .collection_pic .collection_name span {
	    display: block;
	    max-width: 80%;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}

	@media (max-width: 767px) {
		.collection_list_default .collection_content ul {
	        row-gap: 15px;
	        column-gap: 15px;
	        grid-template-columns: repeat(2, 1fr);

	    }
	    .collection_list_default .collection_content li .collection_pic .collection_name {
	        font-size: 18px;
	    }
	}
</style>
<div class="collection_list_default container_wrapper" id="collection_list">
	<h1 class="title">{{ lang.collections.list.collections }}</h1>
	<div class="plugin-container-header"></div>
	<div class="collection_content">

    {% assign collection_ids = section.blocks | get_array_values: "collection" | get_array_values: "id" | join: "," %}
    {% if collection_ids %}
    {% get_collections ids = {collection_ids} limit=100 %}
    <ul>
			{% for product in collections %}
      <li>
        <a class="collection_pic" href="/collections/{{ product.handle }}">
          <div class="collection_img">
            <img data-src="{{ product.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ product.image_alt }}">
          </div>
          <div class="collection_name">{{ product.title }}</div>
        </a>
      </li>
			{% endfor %}
		</ul>
		{% else %}
		{% if collections | size %}
		<ul>
			{% for product in collections %}
      <li>
        <a class="collection_pic" href="/collections/{{ product.handle }}">
          <div class="collection_img">
            <img data-src="{{ product.src }}" src="{{ 'empty.png' | public_asset_abs_url }}" alt="{{ product.image_alt }}">
          </div>
          <div class="collection_name">{{ product.title }}</div>
        </a>
      </li>
			{% endfor %}
		</ul>
		{% include pagination ,{ paginate : paginate } %}
		{% else %}
		{% include empty ,{text:lang.general.empty }%}
		{% endif %}
		{% endif %}
		<div class="plugin-container-footer"></div>
	</div>
</div>
<script type="text/javascript">
console.log({{collections|json}})
	var _w = $('#collection_list').find('li').width();
	$('.collection_pic').css('height', _w);
</script>

{% schema %}
{
  "tag": "section",
  "class": "block_collection",
  "is_global": true,
  "name": {
    "zh_CN": "专辑列表"
  },
  "max_blocks": "100",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    }
  ],
  "blocks": [
    {
      "name": {
        "zh_CN": "选择专辑"
      },
      "type": "collection-item",
      "settings": [
        {
          "type": "card_collection",
          "label": {
            "zh_CN": "专辑"
          },
          "default": {
            "id": "",
            "title": ""
          },
          "id": "collection"
        }
      ]
    }
  ],
  "default": {
    "settings": {},
    "blocks": [
      {
        "collection": {
          "id": "",
          "title": ""
        },
        "block_type": "collection-item"
      }
    ]
  }
}
{% endschema %}